Jassif Team Institution

এইচটিএমএল ফর্ম উপাদান

এই অধ্যায়টি সমস্ত ভিন্ন ভিন্ন HTML ফর্ম উপাদান বর্ণনা করে।

HTML <form> উপাদান

HTML <form> এলিমেন্টে নিম্নলিখিত এক বা একাধিক ফর্ম উপাদান থাকতে পারে:

<input> উপাদান

সবচেয়ে বেশি ব্যবহৃত ফর্ম উপাদানগুলির মধ্যে একটি হল <ইনপুট> উপাদান।

টাইপ অ্যাট্রিবিউটের উপর নির্ভর করে <ইনপুট> উপাদানটি বিভিন্ন উপায়ে প্রদর্শিত হতে পারে।

উদাহরণ

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

<label> উপাদান

<label> উপাদান একাধিক ফর্ম উপাদানের জন্য একটি লেবেল সংজ্ঞায়িত করে।

<label> উপাদানটি স্ক্রিন রিডার ব্যবহারকারীদের জন্য উপযোগী কারণ ব্যবহারকারী যখন ইনপুট উপাদানের উপর ফোকাস করে তখন স্ক্রীন রিডার উচ্চস্বরে লেবেলটি পড়ে।

<label> উপাদানটি এমন ব্যবহারকারীদেরও সাহায্য করে যাদের খুব ছোট এলাকায় ক্লিক করতে সমস্যা হয় (যেমন রেডিও বোতাম বা চেকবক্স) - কারণ যখন ব্যবহারকারী <label> উপাদানের ভিতরের পাঠ্যে ক্লিক করেন, তখন এটি রেডিও বোতাম/চেকবক্স প্রতিস্থাপন করে।

উদাহরণ

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>

<select> উপাদান

<select> উপাদানটি একটি ডাউনলোড তালিকা সংজ্ঞায়িত করে:

উদাহরণ

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<option> উপাদানটি একটি বিকল্প নির্ধারণ করে যা নির্বাচন করা যেতে পারে।

ডিফল্টরূপে, ডাউনলোড তালিকার প্রথম আইটেমটি নির্বাচন করা হয়।

একটি প্রাক-নির্বাচিত বিকল্প সংজ্ঞায়িত করতে, বিকল্পটিতে নির্বাচিত বৈশিষ্ট্য যুক্ত করুন:

<option value="fiat" selected>Fiat</option>

দৃশ্যমান মান:

দৃশ্যমান মানগুলির সংখ্যা নির্দিষ্ট করতে আকার বৈশিষ্ট্যটি ব্যবহার করুন:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

একাধিক নির্বাচনের অনুমতি দিতে:

ব্যবহারকারীকে একাধিক মান নির্বাচন করার অনুমতি দিতে একাধিক বৈশিষ্ট্য ব্যবহার করুন:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<textarea> উপাদান

<textarea> উপাদান একটি বহু-লাইন ইনপুট ক্ষেত্র (টেক্সট এলাকা) সংজ্ঞায়িত করে:

উদাহরণ

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

সারি বৈশিষ্ট্য পাঠ্য এলাকায় দৃশ্যমান লাইনের সংখ্যা নির্দিষ্ট করে।

cols বৈশিষ্ট্য পাঠ্য এলাকার দৃশ্যমান প্রস্থ নির্দিষ্ট করে।

আপনি CSS ব্যবহার করে পাঠ্য এলাকার আকার নির্ধারণ করতে পারেন:

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

<বোতাম> উপাদান

<button> উপাদানটি একটি ক্লিকযোগ্য বোতাম সংজ্ঞায়িত করে:

উদাহরণ

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<fieldset> এবং <legend> উপাদান

<fieldset> উপাদানটি একটি ফর্মে সম্পর্কিত ডেটা গ্রুপ করতে ব্যবহৃত হয়।

<legend> উপাদানটি <fieldset> উপাদানের জন্য একটি ক্যাপশন সংজ্ঞায়িত করে।

উদাহরণ

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

<ডেটালিস্ট> উপাদান

<datalist> উপাদানটি একটি <input> উপাদানের পূর্বনির্ধারিত বিকল্পগুলির একটি তালিকা নির্দিষ্ট করে।

ব্যবহারকারীরা ডেটা প্রবেশ করার সাথে সাথে পূর্বনির্ধারিত বিকল্পগুলির একটি ডাউনলোডযোগ্য তালিকা দেখতে পাবেন।

<input> উপাদানের তালিকা বৈশিষ্ট্য অবশ্যই <datalist> উপাদানের id বৈশিষ্ট্য উল্লেখ করবে।

উদাহরণ

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

<আউটপুট> উপাদান

<output> উপাদানটি একটি গণনার ফলাফল উপস্থাপন করে (যেমন একটি স্ক্রিপ্ট দ্বারা সঞ্চালিত)।

উদাহরণ

একটি গণনা সম্পাদন করুন এবং ফলাফলটি <output> উপাদানে প্রদর্শন করুন:

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

অনুশীলন করুন